<template>
  <el-select :multiple="isMultiple" v-model="item.fieldList" @change="changeSelectField" value-key="businessId">
    <el-option :value="one" :label="listMap[one.businessId] && listMap[one.businessId].name" v-for="one in list" :key="one.businessId"></el-option>
  </el-select>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'formItem',
  components: {}
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) public item!: any;
  @Prop(Array) public fieldsList!: any;
  private listMap = {}
  private get isMultiple () {
    if ([1, 2, 4, 5, 6, 7].indexOf(this.item.actionStatus) !== -1) {
      return true
    } else {
      return false
    }
  }

  private changeSelectField (item: any) {
    this.$emit('changeSelectField', item)
  }

  private get list () {
    const fieldList = this.fieldsList.map(item => {
      this.listMap[item.businessId] = item
      return {
        businessId: item.businessId,
        fieldType: item.fieldType
      }
    })
    if ([1, 2].indexOf(this.item.actionStatus) !== -1) {
      return fieldList
    } else if ([4, 5, 6, 7].indexOf(this.item.actionStatus) !== -1) {
      return fieldList.filter((one) => {
        return !['group'].includes(one.fieldType)
      })
    } else if ([3].indexOf(this.item.actionStatus) !== -1) {
      return fieldList.filter((one) => {
        return !['group', 'sign', 'accessory', 'associateUser', 'associateSpare', 'associateService'].includes(one.fieldType)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>
